<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>marker</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<!--加载地图js-->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=80dcce144694739ec6f22a2e9d0bfb0f"></script>
		<!--加载坐标点js-->
		<script type="text/javascript" src="position.js"></script>
	</head>
	<body>
		<div class="mapBox">
			<!--地图容器-->
			<div id="container"></div>
		</div>
		
		<script>
			<!--初始化地图-->
			var markers = []; //初始化marker
			var map = new AMap.Map("container", {
				resizeEnable: true, //是否监控地图容器尺寸变化
				center: [116.397428, 39.90923], //初始化地图层级
				zoom: 4 //初始化地图中心点
			});
			
			//添加多个点到地图
			//思路:生成多个amap.icon对象然后push到一个数组中,接着,通过map.add方法一次性添加到地图上
			for (var i = 0; i < provinces.length; i += 1) {
				var marker;
				if (provinces[i].type === 0) {
					var icon = new AMap.Icon({
						image: 'https://vdata.amap.com/icons/b18/1/2.png',
						size: new AMap.Size(24, 24)
					});
					marker = new AMap.Marker({
						icon: icon,
						position: provinces[i].center.split(','),
						offset: new AMap.Pixel(-12,-12), //图标的偏斜量设置,因为图标默认是从左上角开始,你想给它定位到中间,你就得需要偏斜一下
						zIndex: 101,
						title: provinces[i].name,
						//map: map //通过此属性渲染进页面
					});
				} else {
					marker = new AMap.Marker({
						position: provinces[i].center.split(','),
						title: provinces[i].name,
						//map: map
					});
					if (provinces[i].type === 2) {
						var content= "<div class = 'taiwan'>宝岛台湾</div>";
						baodao = new AMap.Marker({
							content: content,
							position: provinces[i].center.split(','),
							title: provinces[i].name,
							offset: new AMap.Pixel(0,0),
							//map: map
						});
					}
				}
				//把生成的marker对象push到marker组中 然后在统一渲染
				markers.push(marker);
			}
			
			//自动适应显示范围,比如第一个坐标在香港,第二个在北京,
			//此方法会自动匹配这俩地方的距离 然后在地图总显示
			map.setFitView();
			
			//如果你没有在new Amap.marker中去指定map:map 就必须通过此
			//add方法进行添加
			map.add(markers);
		
		</script>
		<style>
			.mapBox {
				width: 800px;
				height: 600px;
				position: relative;
			}
			html, body, #container {
				height: 100%;
				width: 100%;
			}
		</style>
	</body>
</html>
